<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title>CSS Regions - Simple Template Demo</title>
	<style type="text/css">
	body,
	html {
		height:100%;
		width:100%;
		overflow:hidden;
	}
	
	body {
		margin:0;
		font-family: Helvetica, Arial, sans-serif;
		color:#222;
		font-size:16px;
		line-height:20px;
	}
	
	p {
		margin:0;
		display:inline;
	}
	
	.container{
		text-align:justify;
		-webkit-hyphens:auto;
		
		/* flow the content inside this element */
		-webkit-wrap-shape-mode: content;
		
		width: 30em;
		height: 30em;
		overflow: hidden;
	}	
	
	.container p {
			font-size: 1.2em;
	    color: #808080;
	}
	
	.exclusion{
		position:absolute;
		background: rgba(70, 164, 233, 0.5);
		/* flow text around this element */
		--webkit-wrap-shape-mode: around;

		--webkit-render-wrap-shape: auto;
	}
	
	#exclusion1{
		top: 7.5em;
		left: 15em;
		height: 7.5em; 
		width: 7.5em;	
	}

	#exclusion2{
		top: 15em;
		left: 7.5em;
		height: 7.5em;
		width: 7.5em;
	}

	.rect1{
		/* regular box */
		/* -webkit-wrap-shape: polygon(0px, 0px 7.5em, 0px 7.5em, 7.5em 0px, 7.5em 0px, 0px); */
		
		/* emulate wrap-flow: end */
		-webkit-wrap-shape: polygon(-15em, 0px 7.5em, 0px 7.5em, 7.5em -15em, 7.5em -15em, 0px);
		
		/* emulate wrap-flow: start */
		--webkit-wrap-shape: polygon(0em, 0px 15em, 0px 15em, 7.5em 0em, 7.5em 0em, 0px);
		
		/* emulate wrap-flow: both */
		--webkit-wrap-shape: polygon(0px, 0px 7.5em, 0px 7.5em, 7.5em 0px, 7.5em 0px, 0px);
		
		/* emulate wrap-flow: clear */
		--webkit-wrap-shape: polygon(-15em, 0px 15em, 0px 15em, 7.5em -15em, 7.5em -15em, 0px);
	}
	
	.rect2{
		/* regular box */
		/* -webkit-wrap-shape: polygon(0px, 0px 7.5em, 0px 7.5em, 7.5em 0px, 7.5em 0px, 0px); */
		
		/* emulate wrap-flow: end */
		-webkit-wrap-shape: polygon(-15em, 0px 7.5em, 0px 7.5em, 7.5em -15em, 7.5em -15em, 0px);
		
		/* emulate wrap-flow: start */
		-webkit-wrap-shape: polygon(0em, 0px 22.5em, 0px 22.5em, 7.5em 0em, 7.5em 0em, 0px);
		
		/* emulate wrap-flow: both */
		--webkit-wrap-shape: polygon(0px, 0px 7.5em, 0px 7.5em, 7.5em 0px, 7.5em 0px, 0px);
		
		/* emulate wrap-flow: clear */
		--webkit-wrap-shape: polygon(-7.5em, 0px 22.5em, 0px 22.5em, 7.5em -7.5em, 7.5em -7.5em, 0px);
	}
	#workspace{
		position:relative;
		width:80%;
		margin:0 auto;
		font-size: 13px;
		top: 25px;
	}
	
	.col {
	    position: absolute;
	    height: 100%;
	    border: 1px solid gray;
	    top: 0px;
	    opacity: 0.5;
	    width: 7.5em;
	}
	
	.row {
	    position: absolute;
	    width: 100%;
	    border: 1px solid gray;
	    left: 0px;
	    opacity: 0.5;
	    height: 7.5em;
	}
	
	#col-1 {
	    left: 0px;
	}
	
	#col-2 {
	    left: 7.5em;
	}
	
	#col-3 {
	    left: 15em;
	}

	#col-4 {
	    left: 22.5em;
	}
	
	#row-1 {
	    top: 0px;
	}
	
	#row-2 {
	    top: 7.5em;
	}
	
	#row-3 {
	    top: 15em;
	}

	#row-4 {
	    top: 22.5em;
	}
	</style>
</head>
<body>
	
	<div id="workspace">
		<div id="exclusion1" class="exclusion rect1"></div>
		<div id="exclusion2" class="exclusion rect2"></div>
		<div style="position:absolute;">
		<div class="container">
			<p>Lo&shy;rem ip&shy;sum do&shy;lor sit amet, con&shy;sec&shy;te&shy;tur ad&shy;ipisc&shy;ing elit. Vi&shy;va&shy;mus ac nul&shy;la ac nunc ves&shy;ti&shy;b&shy;u&shy;lum sod&shy;ales sed eget pu&shy;rus. In&shy;te&shy;ger tris&shy;tique neque at urna eleif&shy;end por&shy;ta. Mau&shy;ris a sa&shy;pi&shy;en augue, ve&shy;hic&shy;u&shy;la rutrum augue. Sus&shy;pend&shy;isse pre&shy;tium pulvi&shy;nar tris&shy;tique. Nul&shy;la el&shy;e&shy;men&shy;tum blan&shy;dit mas&shy;sa, pel&shy;len&shy;tesque el&shy;e&shy;men&shy;tum orci tem&shy;pus sed. Cur&shy;a&shy;bi&shy;tur eget est neque, nec pel&shy;len&shy;tesque enim. Sed blan&shy;dit do&shy;lor et neque tin&shy;ci&shy;dunt rutrum. Lo&shy;rem ip&shy;sum do&shy;lor sit amet, con&shy;sec&shy;te&shy;tur ad&shy;ipisc&shy;ing elit. Nul&shy;lam tin&shy;ci&shy;dunt do&shy;lor vel neque eleif&shy;end frin&shy;g&shy;il&shy;la. Prae&shy;sent et orci nec jus&shy;to vulpu&shy;tate ul&shy;tri&shy;c&shy;ies ac in leo. In nec ip&shy;sum enim. Donec sus&shy;cip&shy;it plac&shy;er&shy;at ad&shy;ipisc&shy;ing. Nul&shy;la a nunc mi. Sed ve&shy;hic&shy;u&shy;la sus&shy;cip&shy;it mag&shy;na sed con&shy;val&shy;lis. Donec ul&shy;trices con&shy;se&shy;quat tor&shy;tor, at fer&shy;men&shy;tum augue mal&shy;esua&shy;da in. Ut cur&shy;sus, odio non port&shy;ti&shy;tor var&shy;i&shy;us, dui neque luc&shy;tus la&shy;cus, in rhon&shy;cus dui odio eges&shy;tas libe&shy;ro. Mae&shy;ce&shy;nas po&shy;s&shy;u&shy;ere con&shy;sec&shy;te&shy;tur lec&shy;tus, vi&shy;tae con&shy;sec&shy;te&shy;tur lig&shy;u&shy;la con&shy;sec&shy;te&shy;tur eu.</p>

    		<div id="col-1" class="col"></div>
    		<div id="col-2" class="col"></div>
    		<div id="col-3" class="col"></div>
    		<div id="col-4" class="col"></div>
			
    		<div id="row-1" class="row"></div>
    		<div id="row-2" class="row"></div>
    		<div id="row-3" class="row"></div>
    		<div id="row-4" class="row"></div>
			
		</div>
		</div>
	</div>
	
</body>
</html>